<template>
    <el-row :gutter="25">
        <el-col :span="6">
            <el-card shadow="hover" class="el-card__body__num1">
                <div class="titile" style="margin: -20px 0 -12px;">新增用户</div>
                <div class="number">3659 <span style="font-size: 16px;">人</span></div>
                <el-progress :stroke-width="10" :percentage="70" style="margin-top: -10px;"></el-progress>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="el-card__body__num2">
                <div class="titile" style="margin: -20px 0 -12px;">自来水</div>
                <div class="number">5188.5 <span style="font-size: 16px;">吨</span></div>
                <el-progress :stroke-width="10" :percentage="60" style="margin-top: -10px;"></el-progress>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="el-card__body__num3">
                <div class="titile" style="margin: -20px 0 -12px;">用电量</div>
                <div class="number">2334.2 <span style="font-size: 16px;">Mwh</span></div>
                <el-progress :stroke-width="10" :percentage="80" style="margin-top: -10px;"></el-progress>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="el-card__body__num4">
                <div class="titile" style="margin: -20px 0 -12px;">天然气</div>
                <div class="number">3987.21 <span style="font-size: 16px;">Kcal</span></div>
                <el-progress :stroke-width="10" :percentage="40" style="margin-top: -10px;"></el-progress>
            </el-card>
        </el-col>
    </el-row>
</template>
<style>
.number {
    font-size: 35px;
}
.tiitle{
    margin-top: -50px!important;
    
}
.el-card__body {
    color: aliceblue;
}

.el-card__body__num1,
.el-card__body__num2,
.el-card__body__num3,
.el-card__body__num4 {
    height: 110px;
}

.el-card__body__num1 {
    background-image: linear-gradient(45deg, #39b54a, #8dc63f);
}

.el-card__body__num2 {
    background-image: linear-gradient(45deg, #9000ff, #5e00ff);
}

.el-card__body__num3 {
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
}

.el-card__body__num4 {
    background-image: linear-gradient(45deg, #ff9700, #ed1c24);
}

.el-progress__text {
    color: #fff !important;
}

/* 当前状态颜色 */
.el-progress-bar__outer {
    background-color: #fff;
}

/* 进度条的背景色 */
.el-progress-bar__inner {
    background-color: rgba(26, 25, 25, 0.2);
}
</style>